<#include "../layout/header.ftl"/>
<body>
    <div class="wrapper">
        <#include "../layout/nav.ftl"/>
        <aside class="main-sidebar">
            <section class="sidebar">
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">主要菜单</li>
                    <li class="treeview">
                        <a href="javascript:;">
                            <i class="icon icon-file"></i> 
                            <span>项目</span>
                            <span class="pull-right-container">
                                <i class="icon icon-angle-left"></i>
                            </span>
                        </a>
                    <ul class="treeview-menu">
                            <#list projs as item>
                                <li <#if proj??><#if item==proj>class="active"</#if></#if> ><a href="${ctx}/conf/node/list?proj=${item!}"><i class="icon icon-circle-blank"></i> ${item!}</a></li>
                            </#list>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="javascript:;">
                            <i class="icon icon-columns"></i> 
                            <span>日志查询</span>
                            <span class="pull-right-container">
                                <i class="icon icon-angle-left"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="icon icon-circle-blank"></i> 新增</a></li>
                            <li><a href="#"><i class="icon icon-circle-blank"></i> 修改</a></li>
                            <li><a href="#"><i class="icon icon-circle-blank"></i> 删除</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </aside>
        <div class="content-wrapper">
            <div class="content-body">
                <#if proj??>
                    <div class="container-fluid">
                        <div class="alert alert-warning alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <p>点击环境查看配置信息</p>
                        </div>
                        <ul class="nav nav-tabs" style="margin-bottom: 20px;">
                        <#list evns as item>
                            <li <#if item==evn>class="active"</#if>><a href="${ctx}/conf/node/list?proj=${proj!}&evn=${item!}">${item!}</a></li>
                        </#list>
                        </ul>
                        <div class="panel">
                            <div class="panel-heading">
                                <div class="panel-title">${proj}</div>
                            </div>
                            <div class="panel-body">
                                <div class="table-tools" style="margin-bottom: 15px;">
                                    <div class="pull-right" style="width: 250px;">
                                        <div class="input-group">
                                            <input type="text" name="searchStr" value="${searchStr!}" id="searchStr" class="form-control" placeholder="关键字">
                                            <span class="input-group-btn">
                                            <button id="search_btn" class="btn btn-default" type="button">搜索</button>
                                        </span>
                                        </div>
                                    </div>
                                    <div class="tools-group">
                                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#addNode"><i class="icon icon-plus-sign"></i> 新增</a>
                                        <a href="#" class="btn btn-danger" data-toggle="modal" data-target="#import"><i class="icon icon-upload"></i> 导入</a>
                                    </div>
                                </div>
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th width="30">
                                            <input type="checkbox">
                                        </th>
                                        <th width="50">ID</th>
                                        <th>名称</th>
                                        <th>值</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <#list nodes as item>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td>${item_index + 1}</td>
                                        <td>${item.name!}</td>
                                        <td>${item.value!}</td>
                                        <td>..</td>
                                        <td>
                                            <a href="#" class="btn btn-xs btn-primary" onclick="editNode('${item.name!}','${item.value!}')">编辑</a>
                                            <a href="#" class="btn btn-xs btn-danger" onclick="deleteNode('${item.name!}')">删除</a>
                                        </td>
                                    </tr>
                                    </#list>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </#if>
            </div>
            <div class="modal fade" id="addNode">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                            <h4 class="modal-title">新增配置</h4>
                        </div>
                        <div class="modal-body">
                            名称：<input type="text" name="nodeName" id="nodeName" value="">&nbsp;&nbsp;
                            值：<input type="text" name="nodeValue" id="nodeValue" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="add_node_btn">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="import">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                            <h4 class="modal-title">导入配置项 &nbsp;(*.txt *.properties)</h4>
                        </div>
                        <div id='uploaderNode' class="uploader">
                            <div class="uploader-message text-center">
                                <div class="content"></div>
                                <button type="button" class="close">×</button>
                            </div>
                            <div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
                            <div class="uploader-actions">
                                <div class="uploader-status pull-right text-muted"></div>
                                <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
                                <button type="button" class="btn btn-link" id="upload_btn"><i class="icon icon-cloud-upload"></i> 开始上传</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    
    $(function () {
        $("#search_btn").click(function () {
            var str = $("#searchStr").val();
            window.location.href = '${ctx}/conf/node/list?proj=${proj!}&evn=${evn!}&searchStr='+str;
        });
        
        $("#add_node_btn").click(function () {
            $.ajax({
                type: "post",
                url: "${ctx}/conf/node/save",
                data: {
                    proj:'${proj!}',
                    evn:'${evn!}',
                    name: $("#nodeName").val(),
                    value: $("#nodeValue").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.success){
                        /*new $.zui.Messager('保存成功', {
                            type: 'success' // 定义颜色主题
                        }).show();*/
                        window.location.reload();
                    } else {
                        new $.zui.Messager(data.msg, {
                        }).show();
                    }
                }
            });
        });

        $('#uploaderNode').uploader({
            url:'${ctx}/conf/node/import?proj=${proj!}&evn=${evn!}',
            // 只允许上传properties或text文件
            filters: {
                mime_types: [
                    {title: 'properties文件', extensions: 'properties'},
                    {title: 'text文件', extensions: 'txt'}
                ]
            },
            responseHandler: function(responseObject, file) {
                var data = JSON.parse(responseObject.response);
                if (data.success == false) {
                    new $.zui.Messager(data.msg, {
                    }).show();
                    return '上传失败。服务器返回了一个错误：' + data.msg;
                }
                new $.zui.Messager('保存成功', {
                    type: 'success' // 定义颜色主题
                }).show();
                setTimeout(function () {//两秒后跳转
                    window.location.reload();
                }, 2000);
            }
        });

        $("#upload_btn").click(function () {
            // 1. 获取 uploader 实例对象
            var uploader = $('#uploaderNode').data('zui.uploader');
            // 2. 调用 start 方法
            uploader.start();
        });
    });

    function deleteNode(nodeName) {
        if(!confirm("是否确认删除配置项" + nodeName)){
            return;
        }
        $.ajax({
            type: "post",
            url: "${ctx}/conf/node/delete",
            data: {
                proj:'${proj!}',
                evn:'${evn!}',
                nodeName: nodeName
            },
            dataType: "json",
            success: function (data) {
                if (data.success){
                    /*new $.zui.Messager('保存成功', {
                        type: 'success' // 定义颜色主题
                    }).show();*/
                    window.location.reload();
                } else {
                    new $.zui.Messager(data.msg, {
                    }).show();
                }
            }
        });
    }

    function editNode(nodeName, nodeValue) {
        $("#nodeName").val(nodeName);
        $("#nodeName").attr("readonly", "readonly");
        $("#nodeValue").val(nodeValue);
        $('#addNode').modal({
            keyboard : false,
            show     : true
        });
    }
    
</script>